<template>
	<view style="width: 100%;padding: 40rpx;">
		<u-form :model="form" ref="uForm">
			<u-form-item label-position="top" :border-bottom="false" label="自动回复内容">
				<u-input :custom-style="iptcls" class="iptcls" v-model="form.auto_reply" />
			</u-form-item>
			<u-form-item label-position="top" :border-bottom="false" label="消息提示音">
				<view style="padding-right: 10rpx;width: 100%;background: #eaedf999;">
					<u-input @click="showSoundList = true" placeholder="请选择提示音" :custom-style="iptclsx" type="select" class="iptclsx"
						v-model="form.message_sound" />
					<u-select @confirm="changeSound" v-model="showSoundList" :list="soundList"></u-select>
				</view>
			</u-form-item>
			<u-form-item :border-bottom="false" label="音量设置" label-width="180">
				<view style="width: 100%;display: flex;flex-direction: column;">
					<u-slider @end="end" @moving="moving" v-model="form.volume"></u-slider>
				</view>
			</u-form-item>
			<u-form-item :border-bottom="false" label="静音模式" label-width="180"><u-switch slot="right" v-model="form.mute_status">
				</u-switch>
			</u-form-item>
		</u-form>
		
		<view style="margin-top: 150rpx;">
			<u-button @click="confirm" shape="circle" type="primary">确认</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					auto_reply: '',
					message_sound: '',
					mute_status: false,
					volume:20
				},
				showSoundList:false,
				soundList:[
					{
						label:"轻快",
						value:'轻快'
					},
					{
						label:"流行",
						value:'流行'
					},
					{
						label:"轻柔",
						value:'轻柔'
					},
					{
						label:"短促",
						value:'短促'
					}
				],
				soundMap:{
					qk:"轻快",
					lx:"流行",
					qr:"轻柔",
					dc:"短促",
				},
				iptcls: {
					padding: "10rpx 20rpx"
				},
				iptclsx: {
					padding: "10rpx 20rpx",
					background: "none"
				}
			}
		},
		onLoad() {
			this.form = {
				...this.$store.state.user.setting,
				mute_status:this.$store.state.user.setting.mute_status == 1
			}
		},
		methods: {
			changeSound:function(e){
				console.log(e[0].value)
				this.form.message_sound = e[0].label
				this.playSound()
			},
			moving:function(e){
				
			},
			playSound:function(){
				if(!this.form.message_sound){
					return
				}
				let url = '';
				for(let k in this.soundMap){
					if(this.soundMap[k] == this.form.message_sound){
						url = '/static/sound/' + k + '.mp3'
						break
					}
				}
				console.log(url)
				const innerAudioContext = uni.createInnerAudioContext();
				innerAudioContext.autoplay = true;
				innerAudioContext.src = url;
				innerAudioContext.onPlay(() => {
				  console.log('开始播放');
				});
				innerAudioContext.onError((res) => {
				  console.log(res.errMsg);
				  console.log(res.errCode);
				});
			},
			end:function(){
				uni.showToast({
					title:`音量${this.form.volume}`,
					icon:"none"
				})
				plus.device.setVolume(this.form.volume / 100)
				this.playSound()
			},
			confirm: function(){
				const data = this.form
				if(data.message_sound){
					let msgsd = '';
					for(let o of this.soundList){
						if(o.label == data.message_sound){
							msgsd = o.value
							break
						}
					}
					data.message_sound = msgsd
				}
				data.mute_status = data.mute_status ? 1 : 0
				console.log(33333,data)
				this.$store.dispatch({
					type:"user/setUserSetting",
					payload:data
				})
			}
		}
	}
</script>

<style scoped>
	.iptcls {
		background: #eaedf999;
		border-radius: 8rpx;
	}

	.iptclsx {
		background: none;
		border-radius: 8rpx;
	}
</style>